<template>
  <div>
    <el-dialog
      modal-class="artificial-dialog"
      v-model="_isOpen"
      width="1200"
      :title="'人工明细'"
      align-center
      :show-close="true"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <template #header>
        <h4>人工明细</h4>
      </template>
      <template #default>
        <header>
          <div class="left">
            <h3 class="mr40" v-if="optionInfo.dialogType === 'ys'">
              人工报价：<span>¥{{ _detail.quoteMoney }}</span>
            </h3>
            <h3 class="mr40" v-if="optionInfo.dialogType === 'de'">
              人工报价：<span>¥{{ getTotalPrice() }}</span>
            </h3>
          </div>
        </header>

        <div class="table-wrap">
          <el-table class="jzt-table" :data="tableData" stripe style="width: 100%; height: 500px">
            <template #empty>
              <el-empty description="这里暂时什么都没有" />
            </template>
            <el-table-column label="序号" fixed type="index" width="60" />
            <el-table-column prop="workerType" fixed show-overflow-tooltip label="工种名称" width="360">
              <template #default="scope">
                <!-- {{ scope.row.workerType }} -->
                {{ useCodeArrStore().getDictName("quota_worker_type", scope.row.workerType) }}
                <!-- 数据字典 quota_worker_type -->
              </template>
            </el-table-column>
            <el-table-column prop="unit" show-overflow-tooltip label="计费方式" width="200">
              <template #default="scope">
                <!-- {{ scope.row.unit }} -->
                {{ useCodeArrStore().getDictName("quota_charge_type", scope.row.unit) }}
                <!-- 数据字典 quota_charge_type -->
              </template>
            </el-table-column>
            <el-table-column prop="quoteUnitPrice" show-overflow-tooltip label="报价单价" width="200">
              <template #default="scope"> ¥ {{ scope.row.quoteUnitPrice || "-" }} </template>
            </el-table-column>
            <el-table-column prop="workerNum" show-overflow-tooltip label="数量">
              <template #default="scope">
                <p v-if="optionInfo.actionType === 'view'">{{ scope.row.workerNum || "-" }}</p>
                <template v-else>
                  <el-input
                    class="mr12"
                    v-model="scope.row.workerNum"
                    oninput="value=value.replace(/[^0-9]/g, '')"
                    style="width: 100px"
                    @change="changeNUM"
                  ></el-input>
                  <b v-if="Number(scope.row.workerNum) - Number(scope.row._workerNum) > 0" style="color: #00b42a">
                    +{{ Number(scope.row.workerNum) - Number(scope.row._workerNum) }}
                  </b>
                  <b v-if="Number(scope.row.workerNum) - Number(scope.row._workerNum) < 0" style="color: #ff3333">
                    {{ Number(scope.row.workerNum) - Number(scope.row._workerNum) }}
                  </b>
                </template>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </template>
      <template #footer v-if="optionInfo.actionType === 'edit'">
        <div class="dialog-footer">
          <div style="flex: auto">
            <el-button type="info" @click="cancelClick">取消</el-button>
            <el-button type="primary" v-if="optionInfo.actionType === 'edit'" @click="confirmClick">保存</el-button>
          </div>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted, nextTick } from "vue";
import { ElMessage } from "element-plus";
import {
  getFolder,
  _debounce //防抖，多次频繁触发时，只执行最后一次
} from "@/utils/index";
import { Search } from "@element-plus/icons-vue";
import { updateQuoteWorkerNum } from "@/apis/quote-price/following";
import useCodeArrStore from "@/store/modules/select";

const emit = defineEmits(["update:isOpen", "submitOk"]);
const props = defineProps({
  isOpen: {
    type: Boolean,
    default: false
  },
  optionInfo: {
    type: Object,
    default: () => {
      return {
        currTempObj: {}, //选中的模板obj
        dialogType: "ys", //ys-预算报价  de-定额模板
        actionType: "edit", //edit view
        detail: {}
      };
    }
  }
});
const tableData = ref([
  // { workerNum: 6, quoteUnitPrice: 10 },
  // { workerNum: 12, quoteUnitPrice: 5 }
]);
const _detail = ref({});

watch(
  () => props.optionInfo.detail._time,
  val => {
    console.log("传递过来的人工明细", props.optionInfo);
    _detail.value = props.optionInfo.detail;
    tableData.value = props.optionInfo.detail.customerQuotaWorkerList || props.optionInfo.detail.quotaWorkerVOList || [];
    tableData.value.map(item => {
      const NUM = item.workerNum;
      item._workerNum = NUM; //原有的数量数据，手动更改数量后，不会对它造成影响
    });
  },
  { deep: true, immediate: false }
);

const _isOpen = computed({
  get() {
    return props.isOpen;
  },
  set(value) {
    emit("update:isOpen", value);
  }
});

const getTotalPrice = () => {
  let price = 0;
  tableData.value.map(item => {
    price += Number(item.costTotalPrice);
  });
  return price;
};

const changeNUM = () => {
  // console.log("更改了数量", tableData.value);
  let price = 0;
  if (props.optionInfo.currTempObj.budgetType === 2) {
    // 套餐
    tableData.value.map(item => {
      price += (Number(item.workerNum) - Number(item.workerNumOld)) * Number(item.quoteUnitPrice);
    });
  } else {
    //常规清单
    tableData.value.map(item => {
      price += Number(item.workerNum) * Number(item.quoteUnitPrice);
    });
  }

  console.log("cccccccccccc", price);
  _detail.value.quoteMoney = price;
  console.log("更改了数量", tableData.value, price);
};

const cancelClick = () => {
  _isOpen.value = false;
  // emit("changeAttr");
};
const confirmClick = () => {
  tableData.value.map(item => {
    delete item._workerNum;
    item.workerNum = Number(item.workerNum);
  });
  updateQuoteWorkerNum({
    contentId: _detail.value.contentId,
    workers: tableData.value
  }).then(res => {
    if (res.code === 200) {
      ElMessage({
        message: "保存成功",
        type: "success"
      });
      _isOpen.value = false;
      emit("submitOk");
    }
  });
};

defineExpose({});
</script>

<style lang="scss">
.artificial-dialog {
  .el-dialog {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    .el-dialog__header {
      border-bottom: 1px solid #e2e8f0;
      padding: 0 24px 20px 24px;
    }
    .el-dialog__body {
      padding: 20px;
      header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 14px;
        h3 {
          font-size: 16px;
          font-weight: normal;
          color: #3d3d3d;
          span {
            color: #ff3333;
          }
        }
        .left {
          display: flex;
          align-items: center;
          .el-form-item {
            margin-bottom: 0;
          }
        }
      }
    }
    .el-dialog__footer {
      padding-top: 0;
    }
  }
  .dialog-footer {
    box-shadow: 0px -3px 10px 0px rgba(4, 24, 48, 0.1);
    margin: 0;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
<style lang="scss" scoped>
.el-button--primary {
  --el-button-bg-color: #424e66;
  border: none;
}
.el-button.el-button--info {
  --el-color-info: #f2f3f5;
  --el-color-white: #1d2129;
  &:hover {
    --el-button-hover-bg-color: #f2f3f5 !important;
    border-color: #f2f3f5 !important;
  }
}
</style>
